<template>
  <div class="decision-page">
    <h2>纠纷裁定</h2>

    <!-- 输入框获取 disputeId -->
    <div>
      <label for="disputeId">请输入纠纷ID:</label>
      <input v-model="disputeId" type="text" id="disputeId" placeholder="请输入纠纷ID" />
    </div>

    <!-- 输入框选择裁定结果 -->
    <div>
      <label for="result">请选择裁定结果:</label>
      <select v-model="result" id="result">
        <option value="">请选择</option>
        <option value="发布者胜">发布者胜</option>
        <option value="接单者胜">接单者胜</option>
        <option value="部分退款">部分退款</option>
      </select>
    </div>

    <!-- 退款金额输入框，仅在裁定为部分退款时显示 -->
    <div v-if="result === '部分退款'">
      <label for="refundAmount">请输入退款金额:</label>
      <input v-model="refundAmount" type="number" id="refundAmount" placeholder="请输入退款金额" />
    </div>

    <!-- 提交按钮 -->
    <button @click="submitDecision">提交裁定</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      disputeId: '', // 纠纷ID
      result: '', // 裁定结果
      refundAmount: '', // 退款金额
    };
  },
  methods: {
    // 提交裁定
    async submitDecision() {
      // 验证输入
      if (!this.disputeId) {
        alert('请填写纠纷ID');
        return;
      }
      if (!this.result) {
        alert('请选择裁定结果');
        return;
      }

      // 如果是部分退款，检查退款金额是否输入
      if (this.result === '部分退款' && !this.refundAmount) {
        alert('请输入退款金额');
        return;
      }

      try {
        // 构建请求参数
        const params = {
          disputeId: this.disputeId,
          result: this.result,
          refundAmount: this.refundAmount || 0, // 如果没有输入退款金额，默认为0
        };

        // 发送裁定请求
        const response = await axios.get('http://10.33.16.198:18080/disputes/rule', { params });

        // 处理响应
        if (response.data.code === 200) {
          alert('裁定成功');
        } else {
          alert('裁定失败：' + response.data.message);
        }
      } catch (error) {
        console.error('提交裁定失败:', error);
        alert('请求失败，请稍后再试');
      }
    },
  },
};
</script>

<style scoped>
.decision-page {
  padding: 20px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

input, select {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

button {
  padding: 8px 12px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}

div {
  margin-bottom: 20px;
}
</style>
